<!DOCTYPE html>
<html>
<head>
    <title>乘积动画演示</title>
    <style>
        body {font-family: Arial; text-align: center; margin: 20px;}
        .container {width: 80%; margin: 0 auto;}
        .array-row {
            display: flex;
            justify-content: center;
            margin: 15px 0;
        }
        .array-group {
            display: inline-block;
            margin: 0 20px;
        }
        .array-item {
            display: inline-block;
            padding: 15px;
            margin: 5px;
            background: #f0f0f0;
            border: 1px solid #ddd;
            min-width: 40px;
            text-align: center;
        }
        .current-left {background: #aaffaa !important;} /* 左遍历高亮 */
        .current-right {background: #ffaaaa !important;} /* 右遍历高亮 */
        .result {
            margin-top: 30px;
            font-size: 1.2em;
            color: #0066ff;
        }
        .controls {
            margin: 20px 0;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>除自身以外乘积动画演示</h2>
    
    <div class="controls">
        <input type="text" id="inputArray" value="1,2,3,4" placeholder="输入数字用逗号分隔">
        <button onclick="resetAnimation()">重置</button>
        <button onclick="toggleAnimation()" id="toggleBtn">开始</button>
        <input type="range" min="50" max="2000" value="1000" oninput="updateSpeed(this.value)" id="speedSlider">
        <div>速度：当前 <span id="speedDisplay">1秒/步</span></div>
    </div>

    <!-- 三行展示区域 -->
    <div class="array-row">
        <div class="array-group">
            <div class="array-label">原始数组</div>
            <div id="originalArray" class="array-container"></div>
        </div>
        <div class="array-group">
            <div class="array-label">左乘积</div>
            <div id="leftArray" class="array-container"></div>
        </div>
        <div class="array-group">
            <div class="array-label">右乘积</div>
            <div id="rightArray" class="array-container"></div>
        </div>
    </div>
    
    <div class="result" id="resultDisplay"></div>
</div>

<script>
let nums = [1, 2, 3, 4];
let leftProducts = [];
let rightProducts = [];
let answer = [];
let step = 0;
let animationPaused = true;
let speed = 1000;
let intervalId = null;

function initDisplay() {
    updateAllArrays();
    updateResult();
}

function resetAnimation() {
    const input = document.getElementById('inputArray').value.split(',').map(Number);
    nums = input.filter(n => !isNaN(n));
    leftProducts = new Array(nums.length).fill(1);
    rightProducts = new Array(nums.length).fill(1);
    answer = new Array(nums.length).fill(1);
    step = 0;
    
    clearInterval(intervalId);
    document.getElementById('toggleBtn').innerText = '开始';
    animationPaused = true;
    
    initDisplay();
}

function updateAllArrays() {
    updateOriginalArray();
    updateLeftArray();
    updateRightArray();
}

function updateOriginalArray() {
    const arrayDiv = document.getElementById('originalArray');
    arrayDiv.innerHTML = nums.map((num, i) => 
        `<div class="array-item">${num}</div>`
    ).join('');
}

function updateLeftArray() {
    const arrayDiv = document.getElementById('leftArray');
    arrayDiv.innerHTML = leftProducts.map((val, i) => 
        `<div class="array-item ${i === step ? 'current-left' : ''}">${val}</div>`
    ).join('');
}

function updateRightArray() {
    const arrayDiv = document.getElementById('rightArray');
    arrayDiv.innerHTML = rightProducts.map((val, i) => {
        const className = (i === nums.length - 1 - (step - nums.length)) ? 'current-right' : '';
        return `<div class="array-item ${className}">${val}</div>`;
    }).join('');
}

function updateResult() {
    const final = answer.map((val, i) => leftProducts[i] * rightProducts[i]);
    document.getElementById('resultDisplay').innerHTML = 
        `最终结果：[${final.join(', ')}]`;
}

function runStep() {
    if (step < nums.length) {
        // 左遍历阶段
        if (step > 0) {
            leftProducts[step] = leftProducts[step - 1] * nums[step - 1];
        }
        answer[step] = leftProducts[step];
    } else {
        const rightIndex = step - nums.length;
        if (rightIndex >= 0 && rightIndex < nums.length) {
            rightProducts[rightIndex] = 
                (rightIndex + 1 < nums.length ? rightProducts[rightIndex + 1] : 1) * nums[rightIndex + 1];
            answer[rightIndex] *= rightProducts[rightIndex];
        }
    }

    // 更新显示
    updateAllArrays();
    updateResult();
    
    step++;
    if (step > 2 * nums.length) {
        clearInterval(intervalId);
        document.getElementById('toggleBtn').innerText = '重新开始';
    }
}

function toggleAnimation() {
    if (animationPaused) {
        intervalId = setInterval(runStep, speed);
        document.getElementById('toggleBtn').innerText = '暂停';
    } else {
        clearInterval(intervalId);
        document.getElementById('toggleBtn').innerText = '继续';
    }
    animationPaused = !animationPaused;
}

function updateSpeed(newSpeed) {
    speed = newSpeed;
    document.getElementById('speedDisplay').innerText = 
        (speed / 1000).toFixed(1) + '秒/步';
}

// 初始化
document.getElementById('speedSlider').value = 1000;
document.getElementById('speedDisplay').innerText = '1秒/步';
resetAnimation();
</script>
</body>
</html>
